import { useEffect, useRef, useState } from "react"
import * as d3 from 'd3';
const Circle = () => {
  const ref = useRef(null)

  const generateDataset = () => Array(10).fill(0).map(() => [Math.random() * 80 + 10, Math.random() * 35 + 10])


  const [dataset, setDataset] = useState(generateDataset())

  useEffect(() => {
    const svgElement = d3.select(ref.current)
    // svgElement.append('circle').attr('cx', 150).attr('cy', 70).attr('r', 50)
    svgElement.selectAll('circle').data(dataset).join('circle').attr('cx', d => d[0]).attr('cy', d => d[1]).attr('r', 3)
  }, [dataset])

  useEffect(() => {
    const timer = setInterval(() => {
      const newDataset = generateDataset()
      setDataset(newDataset)
    }, 2000)
    return () => {
      clearInterval(timer)
    }
  }, [dataset])
  return (
    <svg
      viewBox="0 0 100 50"
      ref={ref}
    />
  )
}

export default Circle